// 一、事件的概念：是js中用于实现用户和网页交互
// 二、通过事件监听器来监听事件是否发生，如果事件没有被触发，js就会继续执行后面的代码，当事件被触发之后，在返回执行事件代码
// 三、事件流：当页面元素有父子关系，并且重叠在一起的时候，用户如果最里面的元素做事件操作时，页面同时触发对外层元素的事件
// 四、事件流分类：
// 完整的事件流=事件捕获+事件冒泡
let father = document.getElementsByClassName("father")[0];
let son = document.getElementsByClassName("son")[0];
// （一）事件冒泡（IE团队）:由内到外触发，由最具体的元素到最外层元素
// document.onclick=function(){
//     console.log("document");
// }
// window.onclick=function(){
//     console.log("window");
// }
// son.onclick=function(){
//     console.log("son");
// }
// father.onclick=function(){
//     console.log("father");
// }
// document.body.onclick=function(){
//     console.log("body");
// }
// document.documentElement=function(){
//     console.log("html");
// }

// （二）事件捕获（NetSpace团队）：由外向内，有最外层元素到最具体的元素
// window.addEventListener("click",function(){
//     console.log("window");
// },true);
// son.addEventListener("click",function(){
//     console.log("son");
// },true);
// document.documentElement.addEventListener("click",function(){
//     console.log("document.documentElement");
// },true);
// document.addEventListener("click",function(){
//     console.log("document");
// },true);

// father.addEventListener("click",function(){
//     console.log("father");
// },true);
// document.body.addEventListener("click",function(){
//     console.log("document.body");
// },true);


// 五、事件监听器（元素绑定事件的方法）
// 1.DOM 0级事件监听器： 元素节点.on事件名称=函数
// 缺点：相同元素节点对于相同事件只能绑定一个事件处理函数
// father.onclick=function(){
//     console.log("123");
// }
// father.onclick=function(){
//     console.log("456");
// }

// DOM 0级：删除事件: 元素节点.on事件名称=null
// father.onclick=null;

// 2.DOM 2级事件监听器:元素节点.addEventListener(事件名称，回调函数，布尔值)
// 布尔值为true,表示事件捕获
// 布尔值为false,表示事件冒泡
// 不写布尔值，默认为false，表示事件冒泡
// 优点：相同元素节点对于相同事件可以绑定多个事件处理函数
// function test(){
//     console.log(123);
// }
// father.addEventListener("click",test);
// father.addEventListener("click",function(){
//     console.log(456);
// },true);

// DOM 2级：删除事件：元素节点.removeEventListener(事件名称，回调函数名称)
// 注意：该方法只能删除位于事件冒泡阶段处理的事件，不能删除事件捕获阶段处理的事件
// father.removeEventListener("click",test);


// 六、事件类型
// （一）鼠标事件
// 1.click：单击（按下+抬起）鼠标左键触发
// father.onclick=function(){
//     console.log(123);
// }

// 2.dblclick:双击鼠标左键触发
// father.ondblclick=function(){

//     console.log(123);
// }

// 3.mousedown:按下鼠标任意键触发
// father.onmousedown=function(){
//     console.log(123);
// }

// 4.mouseup:抬起鼠标任意键触发
// father.onmouseup=function(){
//     console.log(123);
// }

// 5.mousemove:鼠标移动时触发
// father.onmousemove=function(){
//     console.log(123);
// }

// 6.mouseenter：鼠标移入时触发；进出子元素时不会反复触发
// father.onmouseenter=function(){
//     console.log("移入")
// }

// 7.mouseleave：鼠标移出时触发；进出子元素时不会反复触发
// father.onmouseleave=function(){
//     console.log("移出")
// }

// 8.mouseover：鼠标移入时触发；进出子元素时会反复触发
// father.onmouseover=function(){
//     console.log("移入")
// }

// 9.mouseout：鼠标移出时触发；进出子元素时会反复触发
// father.onmouseout=function(){
//     console.log("移出")
// }

// （二）键盘事件
// 1.keydown:按下键盘任意键时触发,按住不放会一直触发
// document.onkeydown=function(){
//     console.log(123);
// }

// 2.keyup:用户释放键盘任意键时触发
// document.onkeyup=function(){
//     console.log("123");
// }

// 3.keypress:按下键盘字符键(数字、字母、标点符号)时触发,按住不放会一直触发
// document.onkeypress=function(){
//     console.log(123);
// }

// （三）页面事件
// 1.load:页面加载（页面刷新）时触发
// window.onload=function(){
//     console.log(123);
// }

// 2.unload:页面卸载时触发
// window.onunload=function(){
//     console.log(456);
// }

// 3.scroll:滚动条滚动时触发
// window.onscroll=function(){
//     console.log(pageYOffset);
// }

// 4.resize:浏览器可视窗口大小调整时触发
// window.onresize=function(){
//     console.log(innerWidth);
// }


// 七、事件对象（event）:当事件被触发时，会执行回调函数，
// 在执行函数的同时，会向函数内部传入一个隐含的参数，叫event
// 这个event就被叫做事件对象，该对象主要包含当前事件的相关信息
// 因此event事件对象里面的属性根据事件类型不同，属性也不相同

// 注意：event只能在事件函数中使用；事件函数结束之后，event会自动销毁

// father.onclick=function(){
//     console.log("点击事件");
//     console.log(event);
//     console.log(event.target);
//     console.log(this);
// }


// document.onkeydown=function(){
//     console.log("键盘按下");
//     console.log(event);
// }

// window.onload=function(){
//     console.log("页面加载");
//     console.log(event);
// }

// (一)通用事件对象属性
// 1.事件类型：event.type,表示当前具体的事件类型
// 2.事件目标：event.target,表示触发当前事件的元素节点对象
// 注意：event.target和this的区别
// (1)event.target更多表示触发当前事件的源头，不一定是绑定这个事件的元素节点
// (2)this永远指向绑定这个事件的元素节点


// （二）专用事件对象属性
// （1）鼠标事件专用事件对象属性
// 1.event.button:表示鼠标按下的具体按键
// 0：表示鼠标左键
// 1：表示鼠标中键
// 2：表示鼠标右键

// 2.事件坐标：表示点击鼠标时，鼠标的具体位置
// 第一组：相对于浏览器：
// event.clientX:表示鼠标相对于整个可视窗口的水平位置
// event.clientY:表示鼠标相对于整个可视窗口的垂直位置

// event.pageX：表示鼠标相对于整个页面的水平位置
// event.pageY：表示鼠标相对于整个页面的垂直位置

// 第二组：相对于电脑屏幕左上角
// event.screenX：表示鼠标相对于电脑屏幕左上角的水平位置
// event.screenY：表示鼠标相对于电脑屏幕左上角的垂直位置

// 第三组：相对于事件源位置
// event.offsetX：表示鼠标相对于绑定事件的元素节点本身的水平位置
// event.offsetY：表示鼠标相对于绑定事件的元素节点本身的垂直位置
// father.onmousedown=function(){
//     // console.log(event.button);

//     console.log(event.clientX);
//     console.log(event.clientY);

//     console.log(event.pageX);
//     console.log(event.pageY);

//     console.log(event.screenX);
//     console.log(event.screenY);

//     console.log(event.offsetX)
//     console.log(event.offsetY)

// }

// （2）键盘事件专用事件对象属性
// 1.event.key:表示当前按下键盘上按键的名字，严格区分大小写
// 1.event.keyCode:表示当前按下键盘上按键的ASCLL码，字母返回的ASCLL码，都是大写字母的
// document.onkeydown=function(){
//     console.log(event.key);
//     console.log(event.keyCode);
//     if(event.key=="Enter"){
//         console.log("发送");
//     }
// }

// (三)阻止冒泡:当父子元素同时绑定相同的事件，子元素事件触发的时候，会同时触发父元素的事件
// 不想同时触发父元素绑定的事件，就需要阻止冒泡
// son.onclick=function(){
//     console.log("son");
//     event.stopPropagation();//阻止冒泡
// }
// father.onclick=function(){
//     console.log("father")
// }

// （四）阻止默认行为：比如点击a元素会跳转页面或者刷新页面，按空格滚动条会向下滚动，这个就是默认行为
// let a=document.getElementsByTagName("a")[0];
// a.onclick=function(){
//     console.log(123);
//     event.preventDefault();//阻止默认行为
// }


// 八、事件委托：页面中绑定的事件越多，机会占用运行内容，拖慢页面的交互就绪时间
// 为了解决事件过多的问题，利用事件冒泡的原理，把同一种事件都绑定在最外层的元素上面，事件就会只用一个

// 旧方法：循环添加点击事件，事件数量根据元素数量来定
// let li=document.getElementsByTagName("li");
// for(let i=0;i<li.length;i++){
//     li[i].onclick=function(){
//         this.remove();
//     }
// }


// 事件委托
let ul = document.getElementsByTagName("ul")[0];
ul.onclick = function () {
    // 判断当前点击的是哪一个li元素
    console.log(event);
    // 方法一：通过类名判断
    // if (event.target.className == "min") {
    //     event.target.remove();
    // }

    // 方法二：通过id进行判断
    // if(event.target.id=="one"){
    //     event.target.remove();
    // }

    // 方法三：通过标签名进行判断
    // if(event.target.localName=="li"){
    //     event.target.remove();
    // }

    // 方法四：通过元素内容进行判断
    if(event.target.innerText=="西瓜"){
        event.target.remove();
    }
}